<template>
<div id="complain">
    <div class="process-problem">
        <div class="processit-title">
          <mt-header title="投诉" class="mt-header">
             <mt-button icon="back" slot="left" class="back" @click="$root.goBack()">返回</mt-button>
         </mt-header>
        </div>
        <div class="replace"></div>
        <!-- <div class="complainmsg">
            
        </div> -->
         <div class="process-container">
             <ul>
                <li>
                    <p>联系方式</p>
                    <div class="button-sort">
                        <input type="number" placeholder="默认本人手机" class="mobilenum" v-model="mobile">
                    </div>
                </li>
                   <li>
                    <p>问题描述</p>
                    <div class="button-sort ">
                       <textarea v-model="content" class="problemdes" placeholder="接受应用系统方面的问题手里。（代人保障请留保障本人姓名、工号、联系方式，谢谢！）"></textarea>
                        <a href="#" class="uploadImg" @click="getpicture">
                             <img src="../assets/ic-upload.png" alt="">
                             <span>上传图片</span>
                             <mypicture v-model="show" v-show="isshow" @on-feedback="feedback"></mypicture>
                        </a>
                        <div class="imgview">
                              <ul>
                                  <li v-for="(item,index) in imgList" :key="index">
                                    <img :src="item" alt="">
                                    <i @click="delImg(index)"></i>
                                  </li>
                              </ul>
                        </div>
                    </div>
                </li>
             </ul>
        </div>
          <!-- 提交 -->
      <footer class="btnsubmit" @click="submitComplain">
          <button >提交</button>
      </footer>
    </div>
</div>
</template>

<script>
import { Navbar, TabItem, MessageBox } from "mint-ui";
import { mapGetters, mapActions } from "vuex";
import service from "../service";
import config from "configuration";
import mypicture from "../components/Picture/index";
export default {
  components: {
    Navbar,
    TabItem,
    mypicture,
    MessageBox
  },
  name: "complain",
  data() {
    return {
      show: false,
      isshow: false,
      fileUrl: "",
      imgList: [],
      imgurl: "",
      base64Code: "",
      content: "",
      mobile: "",
      workcode: ""
    };
  },
  computed: {
    ...mapGetters({
      loading: "getLoading",
      direction: "getDirection"
    })
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    delImg(index) {
      this.imgList.splice(index, 1);
      //  console.log(this.imgList)
    },
    submitComplain() {
      if (this.content.length <= 0) {
        MessageBox({
          title: "提示",
          message: "请您输入问题描述！"
        });
        return;
      }
      var params = {};
      params.dept = 3;
      params.type = 3;
      params.content = this.content;
      params.userId = this.workcode;
      params.fileUrl = this.fileUrl;
      params.mobile = this.mobile;
      service.getaddIt(params).then(res => {
        if (res.code == 100) {
          MessageBox({
          title: "提示",
          message: "您的问题已提交"
        });
        this.content="";
        this.imgList=[];
        }
      });
    },
    // 拍照和本地上传
    feedback(imgObj) {
      // alert(imgObj.base64Code);
      this.isshow = false;
      // console.log(imgObj);
      this.base64Code = imgObj.base64Code;
      this.imgList.push(imgObj.base64Url);
      this.imgurl = imgObj.base64Url;
      var imageData = {
        data: this.imgurl,
        userId: this.workcode,
        group: "demon"
      };
      service.postUpload(imageData).then(res => {
        if (res.code == 100) {
          this.fileUrl = res.output.url;
        }
      });
    },
    getpicture() {
      this.show = true;
      this.isshow = true;
      // console.log(this.show)
    },
    getUserInfo() {
      service.getUser().then(data => {
        var params = {};
        params.workcode = this.workcode = data.employeenumber;
        service.getUserMobile(params).then(res => {
          this.mobile = res.data;
        });
      });
    }
  }
};
</script>

 
<style>

</style>